<div class="row justify-content-center">
    <div class="col-10 row bg-dark justify-content-center mt-4 py-4 grid-item">
        <div class="col-12 col-lg-6 row justify-content-center mb-2">
            <div class="col-12 row justify-content-center">
                <div class="col-9 text-center">
                    <h4>{{'HOME.WELCOME' | translate}}</h4>
                </div>
                <div class="col-12 text-center mb-2">
                    <img class="img-fluid" style="max-width: 207px; max-height: 263px;" src="{{generateRandomIcon()}}">
                </div>
            </div>
            <div class="col-12 text-center">
                <h4 class="border-bottom border-secondary pb-1">
                    {{'HOME.TO-BE-IMPLEMENTED' | translate}}
                </h4>
                <p>
                    UI优化 <br />
                    (主流浏览器适配+<a href="https://en.wikipedia.org/wiki/Heuristic_evaluation" target="_blank">Heuristic evaluation</a>）<br />
                    SEO<br />
                </p>
            </div>
        </div>
        <div class="col-12 col-lg-6 text-center bg-dark">
            <h4 class="border-bottom border-secondary p-1">{{'HOME.UPDATE-LOG' | translate}}</h4>
            <div id="home-scrollable">
                <!-- <div *ngFor="let l of logs" class="border-bottom border-secondary">
                    <h5>{{l.date}}</h5>
                    <p [innerHTML]="l.log"></p>
                </div> -->
                <div class="border-bottom border-secondary">
                    <h5>2021.08.20</h5>
                    <p>
                        <a routerLink="/card-list/">思绪列表</a>增加了思绪的满星说服力和防御力<br/>
                        <a routerLink="/card-list/">思绪列表</a>和<a routerLink="/vision-history/">往期女神之影</a>增加了针对部分数据的排序功能<br/>
                         安装了<a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>已确保css在常用浏览器上的表现是一致的（懒人狂喜.jpg）
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.08.14</h5>
                    <p>
                        한국어 번역이 완전히 구현되었습니다. (by <a href="https://github.com/ALeafWolf/NXX-Toolbox/pull/4" target="_blank">Ariette</a>)<br/>
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.08.13</h5>
                    <p>
                        由于新换的GraphQL没法在亚洲地区用，所以后端暂时切换回RESTful api<br/>
                        还顺便重构了下Api的代码<br/>
                        <span style="text-decoration: line-through;">就想安安静静搞个前后端分离我容易嘛我<br/>(╯‵□′)╯︵┻━┻</span>
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.08.11</h5>
                    <p>
                        <a routerLink="/merch-list/">官方周边列表</a>增加筛选功能
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.08.09</h5>
                    <p>
                        基于增加获取数据的效率考虑，后端api由RESTful迁移为Graphql<br/>
                        修缮了<a routerLink="/card-pool-history/">女神之影</a>里的卡池分类，并增加对应的English翻译
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.08.03</h5>
                    <p>
                        UI에 대한 한국어 번역 추가. <a href="https://github.com/ALeafWolf/NXX-Toolbox/pull/1" target="_blank">Ariette</a> 감사합니다. 
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.08.02</h5>
                    <p>
                        <a routerLink="/merch-list/">官方周边列表</a>基础UI完成，更多周边内容待录入
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.07.27</h5>
                    <p>
                        <a routerLink="/card-rss-calculator/">思绪养成材料计算器</a>功能升级，现可自定义所持有的法理之谕和升级区间来计算分配经验<br />
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.05.25</h5>
                    <p>
                        <a routerLink="/card-rss-calculator/">思绪养成材料计算器</a>建造完成<br />
                        原本属于思绪数值设置界面的技能材料计算功能，被移至养成材料计算器中<br />
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.05.19</h5>
                    <p>
                        i18n DONE!!! ~\(≧▽≦)/~ <br />
                        Now support English for majority part of the site<br />
                        Will auto detect the language prefence of the browser if using this site for the first time
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.05.14</h5>
                    <p>
                        Add data language switch function at nav bar, now support English<br />
                        Add cards and skills information in English, which are implemented in CBT<br />
                        将部分图片由png换成webp以提升界面加载速度
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.05.06</h5>
                    <p>
                        <a routerLink="/card-calculator/">战力计算器</a>增加了所选思绪二，三技能加成的总结<br />
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.04.30</h5>
                    <p>
                        增加了<a routerLink="/card-pool-history/">往期女神之影</a>界面<br />
                        已将后端迁移至MongoDB Atlas，<a href="https://github.com/ALeafWolf/tears-of-themis-api"
                            target="_blank">Api</a><br />
                        （以后后台更新数据更方便啦ᕕ( ᐛ )ᕗ）
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.04.18</h5>
                    <p>
                        增加了<a href="https://dottedsquirrel.com/everything-else/add-google-analytics-angular/"
                            target="_blank">Google Analytics</a>用于收集浏览数据<br />
                        增加了左然的思绪<a routerLink="/card-value/左然/两心无间">两心无间</a>和<a routerLink="/card-value/左然/揣摩">揣摩</a><br />
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.04.11</h5>
                    <p>
                        增加了<a routerLink="/skill/先声夺势 III">技能详情</a><br />界面
                        增加了R级思绪的数据<br />
                        增加了思绪列表中思绪获取方式的筛选<br />
                        增加了点击部分图标即可跳转到相关界面的功能<br />
                        部分界面增加了返回页面顶端的按钮<br />
                        修改了部分界面对大屏幕的UI适配<br />
                    </p>
                </div>
                <div class="border-bottom border-secondary">
                    <h5>2021.04.08</h5>
                    <p>
                        修改了错误的思绪和技能数据<br />
                        增加了页面<a routerLink="/cards">思绪列表</a><br />
                        调整了思绪详情界面的UI和背景图片的位置<br />
                        增加了导航栏在小屏幕时折叠成汉堡菜单的效果<br />
                        增添了部分技能的图标<br />
                        在思绪列表和技能列表增加了重置筛选的功能<br />
                    </p>
                </div>
                <div class="p-1">
                    <h5>2021.04.07</h5>
                    <p>
                        <a href="https://bbs.nga.cn/read.php?tid=26235713" target="_blank">Ver 1.0发布啦！！！</a>\o/<br />
                        实装了：<br />
                        思绪选择界面的筛选<br />
                        思绪的战力，基础说服力和基础防御力计算<br />
                        技能列表总览及筛选<br />
                        针对移动端屏幕的UI适配（谢谢你，Bootstrap）
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>